<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue的源码 -->
    <script src="../vue.js"></script>
</head>
<body>
    <!-- 准备一个div，将vue的代码用在这个div中 -->
    <div id="app">
        <!-- 文本插值、插值表达式，两个大括号，扩充html的功能 -->
        <!-- 文本插值可以写的类型：变量、运算、三元表达式、调用函数 -->
        <!-- 双向绑定：数据和视图可以互相修改；另一个说法叫 数据驱动视图更新 -->
        <p>名字：{{name}}</p>
        <p>年龄：{{age}}</p>
        <p>绝招：{{kongFu[0]}}</p>
        <p>性别：{{person.gender}}</p>
        <p>{{hasWude?'':"不"}}讲武德</p>
        <p>{{sayHi()}}</p>
        <hr>
        <input type="text" v-model="age">
        <p>{{age}}</p>
    </div>
    <!-- 自己的js代码 -->
    <script>
        // 1. 实例化
        let vm = new Vue({
            // 挂载元素
            el: '#app',
            // 数据
            data: {
                name: 'Mabaoguo',
                age: 70,
                kongFu: [1,2,3,4,5],
                hasWude: false,
                person: {
                    gender: 'nan'
                }
            },
            methods: {
                // 所有的函数放在这里
                sayHi() {
                    return 'Hi~~'
                }
            }
        })
    </script>
</body>
</html>